<template>
  <div class="mdui-row mdui-m-t-4">
    <div class="mdui-col-sm-12 mdui-col-lg-6 mdui-col-md-6 mdui-col-xl-4">
      <div class="mdui-card mdui-hoverable mdui-shadow-5 mdui-m-b-2">
        <div class="mdui-card-media">
          <img
            src="https://xzcxzc_yy.gitee.io/personal-website/about/img/gu_gu_gu.jpg"
            class="mdui-img-fluid mdui-img-rounded"
          />
          <div class="mdui-card-media-covered">
            <div class="mdui-card-primary">
              <div class="mdui-card-primary-title">421寝室</div>
              <div class="mdui-card-primary-subtitle">鸽巢</div>
            </div>
          </div>
        </div>
        <div class="mdui-card-content">
          <p>常住人口：</p>
        </div>
        <div class="mdui-card-actions" v-for="i in users" v-bind:key="i.name">
          <div class="mdui-chip">
            <img class="mdui-chip-icon" :src="i.avatar_link" />
            <span class="mdui-chip-title">{{i.name}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-for="i in users" v-bind:key="i.name">
      <div class="mdui-col-sm-12 mdui-col-lg-6 mdui-col-md-6 mdui-col-xl-4">
        <parallax-container>
          <parallax-element :parallaxStrength="10" type="depth" tag="div">
            <user
              :name="i.name"
              :sub_name="i.sub_name"
              :title="i.title"
              :sub_title="i.sub_title"
              :content="i.content"
              :avatar_link="i.avatar_link"
              :link="i.link"
            />
          </parallax-element>
        </parallax-container>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import User from "./User.vue";
export default Vue.extend({
  name: "index",
  components: { User },
  data() {
    return {
      users: [
        {
          name: "徐梓晨",
          sub_name: "裁缝",
          title: "熟悉缝纫技巧",
          sub_title: "指 Ctrl + C/V",
          content: "目前已经可以熟稔地对各种项目进行缝合。",
          link: "https://xzcxzc_yy.gitee.io/personal-website/",
          avatar_link:
            "https://xzcxzc_yy.gitee.io/personal-website/img/good_thumb.jpg"
        },
        {
          name: "刘文卓",
          sub_name: "写代码的",
          title: "热爱生活",
          sub_title: "指睡觉与吃饭",
          content: `国家级睡觉运动员`,
          avatar_link: "https://i.loli.net/2018/02/14/5a83925457828.png",
          link: "https://margatroid.xyz"
        },
        {
          name: "谌瑞佳",
          sub_name: "混元金仙",
          title: "专注修习仙术",
          sub_title: "吸收天地灵气",
          content: "雷劫将至，我须守住元神。",
          link: "https://chenruijia.gitee.io/myweb",
          avatar_link:
            "https://gitee.com/chenruijia/codes/ji0or7st3ycdkbpgnw2h965/raw?blob_name=UFVM347J5%280_%7E%5BFW24B%24O%7DU.jpg"
        }
      ]
    };
  }
});
</script>
